<template>
  <el-card>
    <bread data1="订单管理" data2="订单列表"></bread>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type='index' label="#" > </el-table-column>
      <el-table-column prop="order_number" label="订单编号" width="180"> </el-table-column>
      <el-table-column prop="order_price" label="订单价格"> </el-table-column>
      <el-table-column  label="是否付款">
        <template v-slot='scope'>
          <el-button type='success'>
            {{ scope.row.pay_status?'已付款':'未付款' }}
          </el-button>
        </template>
         </el-table-column>
      <el-table-column prop="is_send" label="是否发货"> 
      </el-table-column>
      <el-table-column prop="address" label="下单时间">
        <template v-slot='scope'>
         {{ scope.row.create_time | fmtdate }}
        </template>
         </el-table-column>
      <el-table-column prop="address" label="操作">
        <template v-slot ='scope'>
           <el-row>
             <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                plain
                @click="editorUser(scope.row)"
              ></el-button>
           </el-row>
        </template>
         </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item  label='省市区'>
 <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
     >
    </el-cascader>
    </el-form-item>
    <el-form-item label="详细地址">
     <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
  </el-card>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  data() {
    return {
      tableData:[],
      pagenum: 1,
      pagesize: 27,
      dialogFormVisible:false,
      options: regionDataPlus,
      selectedOptions: [],
     form:{}
    };
  },
  created() {
    this.getOrders();
  },
  methods: {
    async getOrders() {
      const res = await this.$http.get(
        `orders?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
      );
      this.tableData = res.data.data.goods;
    },
    editorUser(){
      this.dialogFormVisible = true 

    }
  }
};
</script>

<style lang="scss" scoped></style>
